import React, { useEffect } from "react";
import "./index.less";
import { Column } from "@ant-design/charts";
import { getRoomNum } from "../../server/api";
import { div } from "framer-motion/client";

const GeneraTerms: React.FC = ({}) => {
  const [data, setData] = React.useState([]);
 
  const config = {
    title: {
      visible: true,
      text: "基础柱状图-转化率组件",
    },
    description: {
      visible: true,
      text: "基础柱状图的图形之间添加转化率标签图形\uFF0C用户希望关注从左到右的数据变化比例",
    },
    forceFit: true,
    data,
    padding: "auto",
    xField: "roomName",
    yField: "total",
    // conversionTag: {
    //   visible: true,
    // },
    meta: {
      action: { alias: "自习室" },
      pv: { alias: "预约人数" },
    },
  };
  const getTotalNum = async () => {
    const res: any = await getRoomNum();
    setData(res);
  };
  useEffect(() => {
    getTotalNum();
  }, []);
  return (
    <div className="gt-ctn">
      <h3>统计预约人数</h3>
      <Column {...config} containerStyle={{ width: 600, height: 300 }} />;
    </div>
  );
};
export default GeneraTerms;
